<template>
	<view class="main">
		<my-back></my-back>
		<logo></logo>
		
		<login v-if="type == 'login'"></login>
		<register v-if="type == 'register'"></register>
		
		<view class="btm">
			<view class="switch" @click="swType">
				{{type == 'login' ? '注册' : '登录' }}
			</view>
			<view class="switch" @click="goto('/pages/account/safe?type=1')">忘记密码</view>
		</view>
	</view>
</template>

<script>
	import logo from '@/pages/account/logo.vue'
	import login from '@/pages/account/login'
	import register from '@/pages/account/register'
	export default {
		components: {
			logo,
			login,
			register
		},
		data() {
			return {
				type: 'login'
			};
		},
		methods: {
			swType() {
				if (this.type == 'login') {
					this.type = 'register'
				} else if (this.type == 'register') {
					this.type = 'login'
				}
			},
			goto(path) {
				if (path) {
					uni.navigateTo({
						url: path,
						animationType: 'slide-in-right',
						animationDuration: 300
					})
				} else {
					uni.showToast({
						title: '暂未开放，敬请期待。',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.main {
		height: 100vh;
		background: url(../../static/images/login.png);
		background-size: cover;
		display: flex;
		flex-flow: column;
		padding-top: 10vh;
		
		/deep/ .form {
			padding: 0 60rpx;
			.ipt-group {
				position: relative;
				.icon {
					width: 40rpx;
					height: 40rpx;
					left: 90rpx;
					top: 50%;
					transform: translate(-50%, -50%);
					position: absolute;
				}
				.ipt {
					height: 80rpx;
					border-radius: 40rpx;
					margin: 30rpx;
					font-size: 30rpx;
					color: #97A2B9 !important;
					background-color: rgba(37,59,102,0.3);
					padding: 0 100rpx;
				}
				.ipt-pc {
					color: #97A2B9 !important;
				}
			}
			.btn-wrap {
				padding: 100rpx 36rpx 36rpx 36rpx;
				.cu-btn {
					padding-top: 40rpx;
					padding-bottom: 40rpx;
					letter-spacing: 6rpx;
				}
				.login {
					background-color: #00D388;
					color: #fff;
				}
				.register {
					background-color: #5478F8;
					color: #fff;
				}
			}
		}
		
		.btm {
			display: flex;
			justify-content: center;
		}
		.switch {
			margin: 30rpx;
			width: 260rpx;
			text-align: center;
			color: #fff;
			letter-spacing: 6rpx;
		}
	}
</style>
